<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>日常管理</el-breadcrumb-item>
      <el-breadcrumb-item>办公用品</el-breadcrumb-item>
      <el-breadcrumb-item><b>办公用品申领审核</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索框 -->
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="申请类型" prop="">
        <el-input v-model="searchFormModel.applyType" placeholder="请输入申请类型" clearable />
      </el-form-item>
      <el-form-item label="审批状态" prop="examineStatus" >
        <el-select v-model="searchFormModel.examineStatus" style="width: 150px">
          <el-option value="未审核" label="未审核"></el-option>
          <el-option value="审核通过" label="审核通过"></el-option>
          <el-option value="审核拒绝" label="审核拒绝"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchOnSubmit">
          <el-icon><Search /></el-icon>  查询
        </el-button>
<!--        <el-button type="success"  @click="dialogAddState=true">
          <el-icon><Plus /></el-icon>  办公用品申领
        </el-button>-->
      </el-form-item>
    </el-form>
  </div>
<!--表格-->
  <div style="margin:20px">
    <el-table :data="officeInfo" stripe border style="width: 100%">
      <el-table-column prop="id" label="序号" v-if="false"/>
      <el-table-column prop="applyDept" label="申请部门"/>
      <el-table-column prop="handleMan" label="申请人"/>
      <el-table-column prop="applyDt" label="申请时间"  />
      <el-table-column prop="typeName" label="类型名"  />
      <el-table-column prop="detailName" label="详情名" />
      <el-table-column prop="num" label="数量" />
      <el-table-column prop="note" label="备注" />
      <el-table-column prop="examineStatus" label="审批状态" />
      <el-table-column prop="submitDt" label="审批时间" />
      <el-table-column label="操作" width="250">
        <template #default="scope">
          <el-button
              size="default"
              type="primary"
              :disabled="scope.row.examineStatus === '审核拒绝'|| scope.row.examineStatus === '审核通过'"
              @click="ApproveHandler(scope.$index, scope.row)">
            <el-icon><Check /></el-icon>审核通过
          </el-button>

          <el-button
              size="default"
              type="danger"
              :disabled="scope.row.examineStatus === '审核通过' || scope.row.examineStatus === '审核拒绝'"
              @click="RejectHandler(scope.$index, scope.row)">
            <el-icon><Close /></el-icon>审核拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,8]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

  <!--新增  -->
  <el-dialog v-model="dialogAddState" title="请选择分类" width="380">
    <div>
      <el-form ref="formAddRef"  :model="formAdd" label-width="120px">
        <el-form-item prop="applyType" label="选择类别：">
          <el-select
              v-model="formAdd.applyType"
              placeholder="请选择类别"
              clearable  style="width:140px">
            <el-option
                v-for="item in classValue"
                :key="item.applyType"
                :label="item.typeName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogAddOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="newAddDialog" title="请选择分类详情" width="380">
    <div>
      <el-form ref="formAddRef"  :model="formAdd" label-width="120px">
        <el-form-item label="申请部门" prop="applyDept">
          <el-input v-model="formAdd.applyDept" placeholder="请输入申请部门"  />
        </el-form-item>
        <el-form-item label="申请人" prop="handleMan">
          <el-input v-model="formAdd.handleMan" placeholder="请输入申请人"  />
        </el-form-item>
        <el-form-item prop="applyTypeDetail" label="选择类别详情：">
          <el-select
              v-model="formAdd.applyTypeDetail"
              placeholder="请选择类别"
              clearable  style="width:140px">
            <el-option
                v-for="item in detailValue"
                :key="item.applyTypeDetail"
                :label="item.detailName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="num">
          <el-input-number v-model="formAdd.num"  :max="10"  />
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="formAdd.note"  type="textarea"  :rows="3" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="newAddOnReset">取消</el-button>
        <el-button type="primary"  @click="newAddOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ArrowRight, Plus, Search,Check ,Close} from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import request from "../../../utils/daily";
import { ElMessage } from "element-plus";

onMounted(() => {
  getOffice();
  getCategory();
});

// 分页
const currentPage = ref(1);
const pageSize = ref(5);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const totals = ref(0);
const officeInfo = ref([]);

// 搜索框
const searchFormRef = ref();
const searchFormModel = reactive({
  applyType: '',
  examineStatus: ''
});

const getOffice = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  };

  if (searchFormModel.applyType && searchFormModel.applyType.trim() !== '') {
    params.applyType = searchFormModel.applyType.trim();
  }
  if (searchFormModel.examineStatus && searchFormModel.examineStatus.trim() !== '') {
    params.examineStatus = searchFormModel.examineStatus.trim();
  }

  request({
    url: '/office/getPage',
    method: 'get',
    params,
  }).then((req) => {
    if (req.data.errorCode == 200) {
      officeInfo.value = req.data.data.records;
      totals.value = req.data.data.totals;
    }
  });
};

const searchOnSubmit = () => {
  getOffice();
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  getOffice();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  getOffice();
};

// 选择分类按钮
const classValue = ref([]);
const getCategory = () => {
  request({
    url: '/officeType/getsA',
    method: 'get',
  }).then((req) => {
    if (req.data.errorCode === 200) {
      classValue.value = req.data.data;
    }
  });
};

// 分类详情
const detailValue = ref([]);
const getDetail = () => {
  request({
    method: 'get',
    url: '/officeTypeDetail/gets',
    params: {
      realtionId: formAdd.applyType,
    },
  }).then((req) => {
    if (req.data.errorCode === 200) {
      detailValue.value = req.data.data;
    }
  });
};

// 添加
const dialogAddState = ref(false);
const newAddDialog = ref(false);
// 新增表单引用
const formAddRef = ref();

// 新增表单初始化数据
const formAddData = {
  applyType: '',
  applyTypeDetail: '',
  applyDept: '',
  handleMan: '',
  num: '',
  note: '',
};

// 新增表单绑定数据模型
const formAdd = reactive({ ...formAddData });


const dialogAddOnReset = () => {
  // 清空表单数据
  Object.assign(formAdd, formAddData);
  // 关闭对话框
  dialogAddState.value = false;
};

const dialogAddOnSubmit = () => {
  getDetail();
  newAddDialog.value=true;
};

const newAddOnSubmit=()=>{
   request({
     method: 'post',
     url: '/office/addOffice',
     data: formAdd,
   }).then((req) => {
     if (req.data.errorCode === 200) {
       ElMessage({
         type: 'success',
         message: req.data.msg,
       });
       Object.assign(formAdd, formAddData);
       getOffice();
     }
   });
   newAddDialog.value = false;
}

const newAddOnReset = () => {
  // 清空表单数据
  Object.assign(formAdd, formAddData);
  // 关闭对话框
  newAddDialog.value = false;
};
////////////////////////////////审核通过
const formEditData = {
  id:'',
  examineStatus:'',
  submitDt:'',
}
// 编辑表单绑定数据模型
const formEdit = reactive({...formEditData})
const ApproveHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)
  formEdit.id=rowData.id;

  request({
    url: '/office/approve',
    method: 'put',
    data: JSON.stringify(formEdit),
    headers: {'content-type': "application/json;charset=UTF-8"}
  }).then(response => {
    if (response.data.errorCode == 200) {
      ElMessage({
        type: 'success',
        message: '审核通过！',
      });
      getOffice();
    }
  })
}
///拒绝
const RejectHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)
  formEdit.id=rowData.id;

  request({
    url: '/office/reject',
    method: 'put',
    data: JSON.stringify(formEdit),
    headers: {'content-type': "application/json;charset=UTF-8"}
  }).then(response => {
    if (response.data.errorCode == 200) {
      ElMessage({
        type: 'success',
        message: '审核通过！',
      });
      getOffice();
    }
  })
}
</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
</style>